import request from "../../utils/request.js"
import hasPermisssion from "../../utils/hasPermission.js"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 是否登录
    isLogin:false,
    // 视频标签列表
    videoBarList:[],
    // 选中的视频标签id
    id:null,
    // 选中的视频标签下对应的视频列表
    videoList:[],
    // 正在播放的视频id
    videoId:null,
    // 是否开启播放列表刷新
    isRefresh:true,
    // 选中要观看的视频id
    vid:null
  },

  // 选择视频标签
  async handleChooseVideoBar(e){
    this.setData({
      id:e.currentTarget.dataset.id,
      videoList:[]
    })
    wx.showLoading({
      title: "加载中"
    })
    await this.reqGetVedioList()
    wx.hideLoading()
  },
  // 获取视频标签列表
  async reqGetVedioBarList(){
    const { data } = await request("/video/group/list")
    this.setData({
      videoBarList: data.slice(0, 20).map(item => {
        return {
          id: item.id,
          name: item.name
        }
      }),
      id: data[0].id
    })
  },
  // 请求获取视频标签下对应的视频列表
  async reqGetVedioList(){
    const res = await request("/video/group", { id: this.data.id })
    console.log(res.datas)
    this.setData({
      videoList: res.datas.map(item => {
        const {
          vid, coverUrl, title, shareCount, commentCount,
          urlInfo: { url },
          creator: { avatarUrl, nickname } } = item.data
        return {
          // 视频id
          vid,
          // 视频展示图片
          coverUrl,
          // 视频地址
          url,
          // 视频标题
          title,
          // 用户头像
          avatarUrl,
          // 用户昵称
          nickname,
          // 分享总数
          shareCount,
          // 评论总数
          commentCount
        }
      })
    })
  },
  // 点击视频播放
  handlePlay(e){
    const {videoId} = this.data
    if (videoId == e.currentTarget.id) return
    else if(videoId){
      const videoContext = wx.createVideoContext(videoId)
      videoContext.pause()
    }
    this.setData({
      videoId:e.currentTarget.id
    })
  },
  // 下拉视频列表刷新
  async handleScrollRefresh(){
    this.setData({
      videoList: [],
      isRefresh:true
    })
    wx.showLoading({
      title: "加载中"
    })
    await this.reqGetVedioList()
    wx.hideLoading()
    this.setData({
      isRefresh:false
    })
  },
  // 选择要播放的视频,并进行视频的自动播放
  handleChooseVideo(e){
    const vid = e.currentTarget.id
    this.setData({
      vid
    })
    const videoContext = wx.createVideoContext(vid)
    videoContext.play()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow:async function () {
    if(!hasPermisssion()) return
    this.setData({
      isLogin:true
    })
    wx.showLoading({
      title:"加载中"
    })
    await this.reqGetVedioBarList()
    await this.reqGetVedioList()
    wx.hideLoading()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: async function () {
    // wx.showLoading({
    //   title: "加载中"
    // })
    await this.reqGetVedioBarList()
    await this.reqGetVedioList()
    // wx.hideLoading()
    wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (e) {
    if(e.from === "menu"){
      return {
        title:"硅谷云音乐",
        path:"/pages/index/index",
        imageUrl:"../../static/images/favicon.ico"
      }
    }else{
      const {title,imageurl} = e.target.dataset
      return {
        title,
        path: "/pages/video/video",
        imageUrl: imageurl
      }
    }
  }
})